<template>
  <component
    :is="componentIs"
    ref="ref-main"
    v-bind="props"
    v-on="events"
  >
    <span
      v-if="text"
      v-text="text"
    />
    <span
      v-if="html"
      v-html="html"
    />
    <el-component-package
      v-for="(item, index) in items"
      :key="buildDOMKey(item, index)"
      :ref="`ref-sub-${index}`"
      :c-m="item"
      v-bind="item.props"
      v-on="item.events"
    />
  </component>
</template>

<script lang="ts">
/*
prop 列表
  CM: ComponentModel  组件模型
ref 列表
  ref-main [默认]
  ref-sub-${index}

疑点
  遍历 items 时必须使用 v-bind、v-on 绑定 props、events 才能生效，未找到原因
*/
import { Component, Prop } from 'vue-property-decorator'
import TgComponent from '../TgComponent'
import { ComponentModel } from '@TG/interface'

@Component({
  name: 'ElComponentPackage'
})
export default class extends TgComponent {
  @Prop({ type: Object, required: true }) private CM!: ComponentModel

  get componentIs() {
    return this.CM.tag || this.CM.component
  }

  get text() {
    return this.CM.text
  }

  get html() {
    return this.CM.html
  }

  get props() {
    return Object.assign({}, this.CM.props, this.$attrs)
  }

  get events() {
    return Object.assign({}, this.CM.events, this.$listeners)
  }

  get items() {
    return this.CM.items
  }

  public defaultRef() {
    return 'main'
  }
}
</script>
